<template>
  <div class="order">
    <!-- 顶部导航条 -->
    <van-sticky>
      <navBar :is-right-arrow="true">
        <div style="color: var(--color)">订单列表</div>
      </navBar>
      <van-tabs
        v-model:active="orderActive"
        title-active-color="#ff9854"
        :line-height="2"
      >
        <template v-for="(item, index) in orderTitle" :key="item.title">
          <van-tab :title="item.title" :name="index"></van-tab>
        </template>
      </van-tabs>
    </van-sticky>
    <div class="content">
      <template v-for="(item, index) in orderList" :key="index">
        <OrderItem :item-data="item"></OrderItem>
      </template>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { ref, watch } from "vue";
import useOrderStore from "../../stores/modules/orderStore";
import OrderItem from "./cpns/order-item.vue";
const orderStore = useOrderStore();
const orderActive = ref();
const orderTitle = [
  { title: "全部订单", type: "all" },
  { title: "近期订单", type: "recent" },
  { title: "待支付", type: "pend" },
];

orderStore.fetchOrderList("all");
const { orderList } = storeToRefs(orderStore);
// 当前活跃页面发生切换 发送网络请求
watch(orderActive, (newvalue, oldvalue) => {
  if (newvalue != undefined) {
    orderStore.fetchOrderList(orderTitle[newvalue].type);
    const data = storeToRefs(orderStore);
    orderList.value = data.orderList.value;
  }
});
</script>

<style lang="less" scoped>
.order {
  .content {
    overflow: scroll;
    background-color: #f7f8fb;
    height: 100vh;
  }
  > * {
    margin-top: 2px;
  }
}
</style>
